// pages/little-demo/qrcode/qecode.js
//  https://blog.csdn.net/qq_67153941/article/details/138052841
//  https://developers.weixin.qq.com/community/develop/article/doc/000e88e73a415835ed9b46d7956013

// 执行 npm install qrcode --save、npm install weapp-qrcode-canvas-2d --save
// 在window上可以直接执行，上会自动生成package.json 文件并将第三方库加载到node_modules目录下,但是在Mac执行有误，需要新执行npm init 已生成package.jso那文件。
// window直接生成式package.json文件，内容是：
// {
//   "dependencies": {
//     "weapp-qrcode-canvas-2d": "^1.1.5"
//   }
// }
// Mac 执行npm init 会提示一些参数输入。当前项目的参数如下：
// Use `npm install <pkg>` afterwards to install a package and
// save it as a dependency in the package.json file.

// Press ^C at any time to quit.
// package name: (little-demo-js-skyline) little-demo-js-skyline 【手动输入】
// version: (1.0.0) 【自动生成】
// description: ump init 【手动输入，应该是可选】
// entry point: (.eslintrc.js) pages/little-demo/home/home.js 【手动输入，应该是可选】
// test command: --version 【手动输入，应该是可选】
// git repository: 【未输入直接回车】
// keywords: 【未输入直接回车】
// author: walker 【手动输入，应该是可选】
// license: (ISC) 【未输入直接回车,然后自动生成package.json文件】
// About to write to /Users/walke/IT/MyGitee/Study/wxmp/Demo/little-demo-js-skyline/package.json:

// {
//   "name": "little-demo-js-skyline",
//   "version": "1.0.0",
//   "description": "ump init",
//   "main": "pages/little-demo/home/home.js",
//   "scripts": {
//     "test": "--version"
//   },
//   "author": "walker",
//   "license": "ISC"
// }

// Is this OK? (yes) 【直接回车即可】
// walkeZengdeMBP:little-demo-js-skyline walke$ npm install qrcode --save 【然后执行具体的第三方库的install】

// 执行完第三方库的安装会生成一个package-lock.json文件、并新建node_modules目标并将第三方库加载到该目录下
// 然后在编辑器工具栏选择 工具 -> 构建 npm。会自动生成miniprogram_npm目录，里面有node_modules对应的库
// 接着就可以使用第三方库了。
// ①导入第三方库
// const QRCode = require('qrcode')
// qrcode2
import drawQrcode from 'weapp-qrcode-canvas-2d'

const codeText = '这是二维码文本'

Page({

  /**
   * 页面的初始数据
   */
  data: {
    scanResult: "--",
    codeText: codeText
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },
  toScan(e) {
    console.log('toScan--->', e)
    wx.scanCode({
      success: (res) => {
        console.log('toScan--success-->', res)
        this.setData({
          scanResult: res.result
        })
      },
      fail: (res) => {
        console.log('toScan--fail-->', res)
      },
      complete: (res) => {
        console.log('toScan--complete-->', res)
      }
    })
  },

  toGenerate(e) {
    console.log('toGenerate--->', e)
    this.generateQRCode(e.currentTarget.dataset.codeText)
    // this.generateQRCode(codeText)
  },

  // 生成二维码
  generateQRCode(text) {
    console.log('generateQRCode--->', text)
    return new Promise((resolve, reject) => {
      const canvas = document.getElementById('qrcode')
      QRCode.toCanvas(canvas, text, (error) => {
        if (error) {
          reject(error)
        } else {
          resolve(canvas.toTempFilePath({
            success: (res) => {
              const imagePath = res.tempFilePath
              // 显示二维码
              this.setData({
                imagePath: imagePath
              })
            },
            fail: () => {
              // 转换临时文件路径失败
            }
          }))
        }
      })
    })
  },

  toGenerate2(e) {
    // this.qrcodeCreate1(codeText)
    this.qrcodeCreate2(codeText)
  },


  qrcodeCreate1(text) {
    const query = wx.createSelectorQuery()
    query.select('#qrcode2')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        var canvas = res[0].node

        // 调用方法drawQrcode生成二维码
        drawQrcode({
          canvas: canvas,
          canvasId: 'qrcode2',
          width: 260,
          padding: 30,
          background: '#ffffff',
          foreground: '#000000',
          text: text,
        })

        // 获取临时路径（得到之后，想干嘛就干嘛了）
        wx.canvasToTempFilePath({
          canvasId: 'qrcode2',
          canvas: canvas,
          x: 0,
          y: 0,
          width: 260,
          height: 260,
          destWidth: 260,
          destHeight: 260,
          success(res) {
            console.log('二维码临时路径：', res.tempFilePath)
          },
          fail(res) {
            console.error(res)
          }
        })
      })
  },

  qrcodeCreate2(text) {
    const query = wx.createSelectorQuery()
    query.select('#qrcode2')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        var canvas = res[0].node

        var img = canvas.createImage();
        img.src = "/assets/image/logo.png"

        img.onload = function () {
          // img.onload完成后才能调用 drawQrcode方法

          var options = {
            canvas: canvas,
            canvasId: 'qrcode2',
            width: 260,
            padding: 30,
            paddingColor: '#fff',
            background: '#fff',
            foreground: '#000000',
            text: '123456789',
            image: {
              imageResource: img,
              width: 80, // 建议不要设置过大，以免影响扫码
              height: 80, // 建议不要设置过大，以免影响扫码
              round: true // Logo图片是否为圆形
            }
          }

          drawQrcode(options)

          // 获取临时路径（得到之后，想干嘛就干嘛了）
          wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: 260,
            height: 260,
            destWidth: 600,
            destHeight: 600,
            canvasId: 'qrcode2',
            canvas: canvas,
            success(res) {
              console.log('二维码临时路径为：', res.tempFilePath)
            },
            fail(res) {
              console.error(res)
            }
          })

        };
      })
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})